<template>
<!-- 转化配置 -->
<a-card :border='false'>
  <div>
    <!-- 查询 -->
    <my-table-screen
      :queryParam="queryParam"
      :queryOptions="queryOptions"
      :queryData="queryData"
      @handleFilter="handleFilter"
    ></my-table-screen>

    <div>
      <!-- table -->
      <my-table
        ref="mytable"
        :tableData="tableData"
        @tableHandleOut="tableHandleOut"
      ></my-table>
      <!-- 分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.page"
        :limit.sync="queryParam.page_size"
        @pagination="getList"
      />
    </div>

    <!-- 弹窗 -->
    <a-modal
      :title="visibleTitle"
      :confirm-loading="confirmLoading"
      :visible="is_model"
      width="50%"
      @ok="subimtData"
      @cancel="close"
    >
      <my-form
        ref="myform"
        :formData="formData"
        :formBox="formBox"
        :formOptions="formOptions"
        @subimt="subimt"
      ></my-form>
    </a-modal>


  </div>

</a-card>
</template>

<script>
import { getConvertList,convertSync } from "@/api/adv/convert";
import { getAccountListGet } from "@/api/adv/account";

const syncformBox = {
  rules: {
    account_id: [{ required:true, message:'请选择至少一个账号',trigger:'change' }],
  },
  directions:'同步时间与数量相关,确认后将自动同步,请耐心等待',
  formItem:[
    { type:'select',prop:'account_id',label:'广告组账户',placeholder:"请选择广告组账户",options:'putAccount',
      isMultiple:'multiple'
    },
  ]
}

export default {
  data () {
    return {
      // 查询
      queryParam:{  // 初始化数据
        page:1,
        page_size:10
      },
      total: 0,
      queryData:[
        { id:'status',title:'转化状态',type:'select',placeholder:'请选择转化状态',options:'toolStatus' },
        { id:'convert_source_type',title:'转化来源',type:'select',placeholder:'请选择转化来源',options:'toolSources' },
        { id:'keyWord',title:'关键词搜索',type:'input',placeholder:'支持ID或名称搜索' },
        { id:'created_at',title:'创建时间',type:'times' },
        { id:'account_id',title:'投放账户',type:'select',placeholder:'请选择投放账户',showSearch:true,options:'putAccount' },
      ],
      queryOptions:{
        toolStatus:this.$global.convertToolStatus,
        toolSources:this.$global.convertToolSources,
        putAccount:[],
      },
      // 表格
      tableData:{
        rowSelection:false,
        batchAction:[ { title:'同步转化配置',item:'primary',tableFnc:'handleSyac',icon:'sync' } ],
        tableDataSource:[],
        tableColumns:[
          { title:'ID',dataIndex:'id',align:'center' },
          { title:'广告投放账户ID',dataIndex:'account_id',align:'center' },
          { title:'转化名称',dataIndex:'name',align:'center' },
          { title:'转化状态',dataIndex:'status',align:'center',scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              for (const item of this.$global.convertToolStatus) if ( item.value === row.status ) return item.label
            },colorEvent:(row)=>{
              return row.status == 'AD_CONVERT_STATUS_ACTIVE' ? `color:${ this.$global.colorStatus['green'] }` : `color:${ this.$global.colorStatus['gray'] }`
            }
          },
          { title:'转化来源',dataIndex:'convert_source_type',align:'center',scopedSlots: {customRender:'filter'},
            formatter:(row)=>{
              for (const item of this.$global.convertToolSources) if( item.value === row.convert_source_type ) return item.label
            }
          },
          { title:'转化监测链接',dataIndex:'action_track_url',align:'center',scopedSlots: {customRender:'link'},ellipsis: true },
        ]
      },
      // 弹窗
      formData:{},   //表单数据
      formBox:{},  // form
      formOptions:{   //select数据
        putAccount:[]
      },
      visibleTitle:'',
      confirmLoading:false,
      is_model:false,
      // 选项
      checkData:[]
    }
  },
  created () {
    this.getList()
    this.getAccount()
  },
  methods: {
    // 初始化数据
    async getList(){
      const res = await getConvertList(this.queryParam)
      if(res.code !== 'SUCCESS') this.getList()
      this.tableData.tableDataSource = res.data.list
      this.total = res.data.page_info.total
    },
    // 投放账户
    async getAccount(){
      await getAccountListGet({ status:'ENABLE' }).then((res)=>{
        this.queryOptions.putAccount = this.$selectOptions(res.data,false,true,'account_id')
        this.formOptions.putAccount = this.$selectOptions(res.data,false,true,'account_id')
      })
    },
    // 表格头部按钮
    async tableHandleOut(tableFnc){
      if( tableFnc === 'handleSyac'){
        this.formBox = syncformBox
        this.formData = Object.assign({}, {})
        this.visibleTitle = '同步广告账号'
        this.is_model = true
      }
    },
    // 确认
    subimtData(){
      if(this.visibleTitle === '同步广告账号'){
        this.$refs.myform.submitForm()
      }
    },
    // 提交
    subimt(formData){
      convertSync(formData.account_id).then((res)=>{
        this.$Tip(res)
        if(res.code === 'SUCCESS') this.getList(),this.is_model = false
      })
    },
    // 查询
    handleFilter(){
      this.queryParam.page = 1
      this.getList()
    },
    // 关闭弹窗
    close(){
      this.is_model = false
    },
  }
}
</script>
